<template>
	<view class="content">
		<view class="search-header">
			<navigator class="search-input-view" hover-class="none" url="../mall_search/index">
				<image class="search-icon" src="../../static/images/icon_search.png"></image>
				<input class="input" disabled placeholder-style="color:#BEC1C3" type="text" placeholder="请输入关键词" />
			</navigator>
			<image class="qrCode" @click="qrCode" src="../../static/images/zhuyesaoma.png"></image>
		</view>
		<view class="swiper-view">
			<swiper style="width: 100%;height: 100%;" :circular="true" :indicator-dots="true" :autoplay="true"  
				:interval="4000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image class="banner-img" :src="item.img" @click="gotoDetail(item.link)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="module">
			<image class="module-item" v-for="(item,index) in moduleArr" :key="index" :src="item.icon"
				@click="gotoPage(item.page)"></image>
		</view>
		
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">精藏宝库</text>
				<view class="right" @click="more_tj(2)">
					<text>更多</text>
					<image class="more_arrow" src="../../static/images/icon_more.png" mode=""></image>
				</view>
			</view>
			<scroll class="goodsItem" :hdlist="reasureRecommend2" type="2">
			</scroll>
			
		</view>
		<view class="group" v-if="reasureRecommend.length>0">
			<view class="group-header">
				<text class="group-header-title">精藏商城</text>
				<view class="right" @click="more_tj(1)">
					<text>更多</text>
					<image class="more_arrow" src="../../static/images/icon_more.png" mode=""></image>
				</view>
			</view>
			
				<scroll class="goodsItem" :hdlist="reasureRecommend" type="1">
				</scroll>
			
		</view>
		<view class="group">
			<view class="group-header" @click="moveFound">
				<text class="group-header-title">热门动态</text>
				<view class="right">
					<text>更多</text>
					<image class="more_arrow" src="../../static/images/icon_more.png" mode=""></image>
				</view>
			</view>
			<template v-for="(item,i) in article">
				<informationItem style="margin-bottom: 20upx;" :data="item"></informationItem>
			</template>
			
			<template v-for="(item,i) in trends">
				<bbsItem :dataSource="item"></bbsItem>
			</template>
		</view>
		<pageFooter v-if="footerSee"></pageFooter>
	</view>
</template>

<script>
	import scroll from './components/scroll.vue'
	import goodsItem from './components/goodsItem.vue'
	import informationItem from './components/information-item.vue'
	import bbsItem from './components/bbs-item.vue'
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		mapGetters
	} from 'vuex';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getProductHot,
		getProductHot2,
		getGroomList1,
		getHomeHotNews
	} from '@/api/peopleHide.js'
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			goodsItem,
			informationItem,
			bbsItem,
			pageFooter,
			scroll
		},
		data() {
			return {
				moduleArr: [{
					icon: "https://mincang-1253640091.cos.ap-shanghai.myqcloud.com/attach/2022/08/8061c202208151635266336.png",
					page: "/pages/companyIntroduction/index"
				}, {
					icon: "https://mincang-1253640091.cos.ap-shanghai.myqcloud.com/attach/2022/08/8d889202208151635262448.png",
					page: "/pages/goods_cate/goods_cate"
				}, {
					icon: "https://mincang-1253640091.cos.ap-shanghai.myqcloud.com/attach/2022/08/722f3202208151635287061.png",
					page: "/pages/user/user_appointment/index"
				}, {
					icon: "https://mincang-1253640091.cos.ap-shanghai.myqcloud.com/attach/2022/08/de28f202208151635282561.png",
					page: "/pages/goods_cate/goods_cate2"
				}],
				reasureRecommend: [],
				reasureRecommend2:[],
				hotNews: {},
				footerSee: false,
				trends: {},
				article: {},
				banner: []
			}
		},
		onLoad() {
			if (uni.getStorageSync('FOOTER_BAR')) {
				this.footerSee = true
				uni.hideTabBar()
			} else {

			}
		},
		
		onShareAppMessage: function() {
		 
			return {
				title: "精藏备案"
				
			};
		},
    onShareTimeline: function() {
    	return {
    		title: "精藏备案"
    	};
    },
		
		onShow() {
			this.getProductHot()
			this.getProductHot2()
			this.getGroomList1()
			this.getHomeHotNews()
		},
		methods: {
			more_tj(type){
				if (type==1) {
					uni.reLaunch({
						url:"/pages/goods_cate/goods_cate"
					})
				} else{
					uni.navigateTo({ 
						url:"/pages/goods_cate/goods_cate2"
					})
				}
			  	
			},
			moveFound(){
				console.log('进来了')
				uni.reLaunch({
					url:"/pages/found/found"
				})
			  // uni.navigateTo({
			  // 	url:"../../found/found"
			  // })	
			},
			gotoDetail(url) {
				uni.navigateTo({
					url
				})	
			},
			qrCode() {
				// #ifdef H5
				uni.showModal({
					title: "提示",
					content: "H5下不支持扫码",
					showCancel: false,
					success(res) {
						if (res.confirm) {

						}
					}
				})
				return
				// #endif
				if (!this.isLogin) {
					toLogin();
				} else {
					uni.scanCode({
						success: (res) => {
							// console.log(JSON.parse(res.result))
							uni.navigateTo({
								url: "/pages/treasure_details/index?result=" + res.result
							})
						}
					})
				}

			},
			gotoPage(e) {
				//判断是否登录
				// uni.navigateTo({
				// 	url: e
				// })
				if (e == "/pages/user/user_appointment/index") {
					if (!this.isLogin) {
						toLogin();
					} else {
						uni.reLaunch({
							 
							url: e
						})
					}
				} else {
					if (e == "/pages/goods_cate/goods_cate") {
						uni.reLaunch({
							url: e
						})
					} else {
						uni.navigateTo({
							url: e
						})
					}

				}

			},
			getProductHot() {
				getProductHot({
					page: 1,
					limit: 20
				}).then(res => {
					this.reasureRecommend = res.data
				})
			},
			getProductHot2() {
				getProductHot2({
					page: 1,
					limit: 20,
					search:"",
					is_record:1,
					cate_id:""
				}).then(res => {
					this.reasureRecommend2 = res.data
					console.log("reasureRecommend2",this.reasureRecommend2)
				})
			},
			getGroomList1() {
				getGroomList1({}).then(res => {
					this.banner = res.data.banner
				})
			},
			getHomeHotNews() { //热门推荐
				getHomeHotNews({}).then(res => {
					this.article = res.data.article
					this.trends = res.data.trends
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		
		background: url("https://mincang-1253640091.cos.ap-shanghai.myqcloud.com/store/comment/a483c202208021259362946.png") repeat-y 0 0;
		background-size: 100%;

	}

	.content {
		width: 750upx;
		// background-color: red;
	}

	.search-header {
		width: 100%;
		// height: 104upx;
		// z-index: 9;
		// left: 0;
		// top: 0;
		// background-color: #FAFAFA;
		// position: fixed;
		margin-top: 260rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 34upx 0 30upx;
		box-sizing: border-box;

		.search-input-view {
			display: flex;
			align-items: center;
			width: 592upx;
			height: 64upx;
			border-radius: 34upx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #ffffff;
			border: 1px solid rgba(203, 203, 203, 0.74);

			.search-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 18rpx;
			}

			.input {
				flex: 1;
				font-size: 24rpx;
			}
		}

		.qrCode {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.swiper-view {
		width: 690upx;
		height: 380upx;
		margin-left: 30upx;
		margin-top: 50upx;
		 
		.banner-img {
			width: 690upx;
			height: 100%;
			 
		}
	}

	.module {
		width: 750upx;
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 60rpx;
		justify-content: space-between;
		.module-item {
			width: 255rpx*0.62;
			height: 250rpx*0.62;
			// margin-right: 20rpx;
			margin-bottom: 10rpx;
		}
	}

	.module-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.group {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;

		.group-header {
			display: flex;
			margin-top: 60rpx;
			align-items: center;
			justify-content: space-between;

			.group-header-title {
				color: #dba13b;
				font-size: 36rpx;
				font-weight: 500rpx;
			}

			.right {
				display: flex;
				align-items: center;
				color: #BEC1C3;
				font-size: 26rpx;

				.more_arrow {
					width: 48upx;
					height: 48upx;
				}
			}
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goodsItem {
		margin-right: 30rpx;
	}

	.goodsItem:nth-of-type(2n) {
		margin-right: 0;
	}
</style>
